<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="档案号/姓名"
        v-model="page.searchObj.query"
        autofocus
        style="width: 230px; margin-right: 30px"
        clearable
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="query">搜索</el-button>
    </div>
    <el-button
      type="primary"
      style="display: flex; justify-content: flex-start; margin: 10px 0"
      @click="authorize">授权或回收角色</el-button
    >
    <el-table :data="tableData" style="width: 100%" height="65vh" highlight-current-row>
        <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="user_name" label="用户名"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="mailbox" label="邮箱"> </el-table-column>
      <el-table-column prop="time" label="注册时间"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="value">
          <span>
            <el-switch
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              inactive-text="禁用"
              v-model="value.row.state"
              :active-value="0"
              inactive-value="1"
              @change="updateState(value.row)"
            >
            </el-switch>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="">
          <span>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5,10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: {
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          query: "", //档案号/姓名
        },
      },
      tableData: [],//表格数据
      total:0 ,//总数量
    };
  },
  created(){
    this.queryUserAll();
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize=val;
      this.queryUserAll();
    },
    handleCurrentChange(val) {
      this.page.pageNum=val;
      this.queryUserAll();
    },
    //授权或回收角色
    authorize(){
      alert();
    },
    //条件查询
    query(){
      this.queryUserAll();
    },
    //   查询所有用户
    queryUserAll(){
        this.axios.post("/api/hj/queryUserAll",this.page)
        .then(result=>{
            this.total = result.data.total;
            this.tableData = result.data.list;
        })
    },
    // 修改状态
    state(id, state) {
      this.axios
        .get("/api/hj/updateUserState", {
          params: {
            id: id,
            state: state,
          },
        })
        .then((result) => {
          this.searchQueryMember();
        });
    },
    updateState(obj) {
      // 0表示启用 1表示禁用
      if (obj.state > 0) {
        this.state(obj.id,1);
      } else {
        this.state(obj.id,0);
      }
    },
  },
};
</script>

<style>
</style>